<template>
  <div class="hello">
    <div class="logo">
      <img src="@/assets/logo.png" alt="" />
      <div class="txt">
        <span></span> <br />
        培训中心
      </div>
    </div>
    <h1>
      {{
        $store.state.examType == 1
          ? "考试指引"
          : !isPxTrue
          ? "视频教学辅助平台"
          : "培训指引"
      }}
    </h1>
    <!--  $store.state.examType == 1 &&  -->
    <div class="header">
      <div class="left">
        当前时间: <span>{{ xtime }} </span> <br />当前位置:
        {{ $store.state.equipmentName }}
      </div>
      <div
        class="right"
        v-show="$store.state.ksksDisable && $store.state.examType == 1"
      >
        <img src="staic/sl.gif" alt="" />
        {{ $store.state.studentName }} 剩余：{{ minutes }} 分
        {{ sec >= "10" ? sec : "0" + sec }} 秒
      </div>
      <div
        class="right"
        v-show="$store.state.examType == 0 && $store.state.studentName"
      >
        <img src="staic/sl.gif" alt="" />
        {{ $store.state.studentName }} 培训已用时：{{ startTimeMin }} 分
        {{ startTimeMillis >= "10" ? startTimeMillis : "0" + startTimeMillis }}
        秒
      </div>
    </div>
    <audio src="staic/ksks.mp3" ref="audio"></audio>
  </div>
</template>

<script>
export default {
  name: "Header",
  props: {
    // pxStart: Number,
    // ExamStatus: String, // 教室手动考试考试
  },

  computed: {
    // name() {
    //   return this.$store.state.studentName;
    // },
    endTime() {
      return this.$store.state.endTime;
    },
    newDate() {
      return this.$store.state.newDate;
    },
  },
  data() {
    return {
      xtime: "",
      isPxTrue: true,
      minutes: 0,
      sec: 59,
      iscount: false,
      millis: 0,
      setEndtime: "",
      setNewDate: "", // 每分钟设置一次时间
      clearsetDate: null,
      seced: null,
      clearStartTime: null,
      startTimeMillis: 0, //计时秒
      startTimeMin: 0, // 计时分
    };
  },

  mounted() {
    this.creatime();
  },

  methods: {
    creatime: function() {
      var aData = new Date(this.$store.state.newDate);
      let yy = aData.getFullYear();
      let mm = aData.getMonth() + 1;
      let dd = aData.getDate();
      let hh = aData.getHours();
      let mf = aData.getMinutes();
      mf = mf < 10 ? "0" + mf : mf;
      this.xtime = `${yy}-${mm >= 10 ? mm : "0" + mm}-${
        dd >= 10 ? dd : "0" + mm
      } ${hh}:${mf}`;
    },
    countDown() {
      if (!this.$store.state.studentName) {
        this.$parent.warndata = [1, "请您先进行人脸认证", 2000];
      } else {
        this.$store.commit("setKsksDisable", true);
        this.$axios
          .get(
            "platform/NetSDK/startDetection?equipmentId=" +
              this.$store.state.equipmentId
          )
          .then((res) => {
            console.log(res);
            if (res.data.result_code == 200) {
              this.$store.state.examType == 1
                ? this.countTime()
                : this.startTime();
            } else {
              this.$notify({
                title: "警告",
                message: res.data.data,
                type: "warning",
                position: "bottom-right",
                offset: 150,
              });
            }
          })
          .catch((err) => {
            console.log(111);
            this.$message.error("服务端出错!" + err);
            this.$parent.warndata = [1, "网络错误", 2600];
            this.$store.commit("setKsksDisable", false);
          });
      }
    },
    // 计算剩余时间
    countTime() {
      this.$store.state.examType == 1
        ? setTimeout(() => {
            this.$refs.audio.play();
          }, 1200)
        : "",
        this.$store.commit("setKsksDisable", true);
      var that = this;
      this.millis =
        new Date(this.endTime.replace(/-/g, "/")) - new Date(this.setNewDate);
      this.minutes = "";
      this.minutes = Math.floor(this.millis / (1000 * 60)); //剩余分钟
      this.sec = Math.floor((this.millis % (1000 * 60)) / 1000); // 剩余秒
      this.iscount = true;
      this.seced = setInterval(() => {
        this.millis = this.millis - 1000;
        that.minutes = Math.floor(this.millis / (1000 * 60));
        that.sec = Math.floor((this.millis % (1000 * 60)) / 1000);
        if (this.millis <= 1000) {
          that.$store.commit("setStudentName", "");
          clearInterval(that.seced);
          that.$store.commit("setKsksDisable", false);
          this.$parent.warndata = [1, "考试时间到!", 1000 * 60];

          setTimeout(() => {
            this.iscount = false;
            this.$parent.queryInfor();
          }, 6e4);
        }
        if (this.millis <= 6e4 * 2 && this.millis >= 6e4 * 2 - 1000) {
          this.$parent.warndata = [1, "您的考试即将结束,请尽快拍照上传", 3500];
        }
      }, 1000);
    },
    // 计算已用时
    startTime() {
      let millis = Number(localStorage.getItem("millis")) || 0;
      this.clearStartTime = setInterval(() => {
        millis = millis + 1000;
        this.startTimeMillis = Math.floor((millis % (1000 * 60)) / 1000);
        this.startTimeMin = Math.floor(millis / (1000 * 60));
        localStorage.setItem("millis", millis);
      }, 1000);
    },
  },
  watch: {
    endTime(newName) {
      clearInterval(this.seced);
      this.setEndtime = newName + " GMT+0800";
    },

    newDate(newval) {
      console.log(newval);
      this.clearsetDate && clearInterval(this.clearsetDate);
      this.setNewDate = new Date(newval).getTime();
      this.creatime();
      this.clearsetDate = setInterval(() => {
        this.setNewDate += 10000;
        this.creatime();
      }, 10 * 1000);
    },
    $route: {
      handler: function(route) {
        switch (route.path) {
          case "/train":
            this.isPxTrue = true;
            break;
          case "/verify":
            this.isPxTrue = false;
            break;
          default:
            break;
        }
      },
      immediate: true,
    },
  },
};
</script>

<style scoped>
h1 {
  font-size: 0.53rem;
  margin-bottom: 0.25rem;
}
.header {
  font-size: 0.15rem;
}
.hello {
  position: relative;
}
.hello .logo {
  position: absolute;
  left: 0.155rem;
  top: -0.15rem;
}
.logo img {
  width: 0.45rem;
}
.logo .txt {
  position: absolute;
  left: 0.4rem;
  width: 1.5rem;
  top: 0.065rem;
  font-size: 0.12rem;
  font-weight: bold;
  line-height: 1.6em;
}
.logo .txt span {
  font-size: 0.14rem;
  letter-spacing: 0.1rem;
}
.hello::after {
  content: "";
  display: block;
  clear: both;
  margin-bottom: 0.55rem;
}
.left {
  float: left;
  border-bottom: 0.02rem solid #420080;
  text-align: left;
  font-size: 0.18rem;
  font-weight: bold;
}
.header .right {
  float: right;
  margin-right: 0.16rem;
  font-size: 0.2rem;
  font-weight: bold;
  margin-top: -0.02rem;
}
.right img {
  width: 60px;
  vertical-align: middle;
}
.left::after {
  content: "";
  display: block;
  height: 0.02rem;
  background: #00bfbf;
  width: 1.3rem;
  position: relative;
  top: 0.1rem;
}
</style>
